<template>
  <div class="container">
    <h1 :class="{ aaa: true, thin: flag }">App组件</h1>
    <!-- <h1 :class="['aaa', flag ? 'thin' : '']">App组件</h1> -->
    <button @click="flag = !flag">切换类名</button>

    <ul :style="{ padding: '5px', margin: '10px', border: 'solid 2px red',color:'orange', width: '100px', height: '30px'}">
      <li>蜡笔小新</li>
    </ul>

    <my-left></my-left>
    <my-right></my-right>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
    data () {
    return {
      flag: true
    }
  },
  components: { MyLeft, MyRight },

}
</script>

<style lang="less" scoped>
.aaa{
  color: #fe7299;
}
.thin {
  font-weight: 200;
}

// 样式穿透，在父组件中，修改子组件的样式
.container /deep/ p {
  width: 490px;
  height: 50px;
  font-size: 30px;
  background-color: #bcdaea;
}
</style>